<!-- Dom模板 -->
<template>
  <div class="fenClass">
    <!-- Dom内容 -->
    <div class="sou">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @click="click"
      />
    </div>

    <div class="fenClass_body">
      <!-- 左边列表分类 -->
      <div class="left">
        <div
          :class="nowIndex === index ? 'left_list active' : 'left_list'"
          v-for="(item, index) in data"
          :key="index"
          @click="getActive(index)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 右边数据列表 -->
      <div class="right">
        <div class="right_box">
          <Swiper :bannerList="bannerList"></Swiper>
          <div
            class="type"
            v-for="(item, index) in typeList"
            :key="index"
            @click="getfenclassList(item)"
          >
            <img :src="item.tu" alt="" />
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="tan" v-show="IfShow">
      <p>
        历史搜索 <span @click="empty" v-show="emptyShow">清空</span
        ><span @click="emptys" ref="bian" v-show="emptyShow">编辑</span>
      </p>
      <div class="lishi">
        <span v-for="(item, index) in valueList" :key="index"
          ><b @click="onclick(item)">{{ item.val }}</b>
          <b class="bb" @click="remove(item)" v-if="vif">×</b></span
        >
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Swiper from "../../components/swiper/slideshow.vue";
import * as api from "../../components/api/shmily";
export default {
  name: "",
  data() {
    return {
      vif: false,
      msg: "测试",
      value: "",
      IfShow: false,
      Toast: "",
      data: [
        "好货推荐",
        "男装",
        "女装",
        "彩妆个护",
        "食品饮料",
        "鞋履箱包",
        "母婴用品",
        "生活家居",
        "厨房餐具",
      ],
      nowIndex: 0,
      typeList: [],
      bannerList: [],
      valueList: [],
      emptyShow: false,
      token: JSON.parse(localStorage.getItem("token")),
      goods:[],
      type:this.$route.query.type
    };
  },
  //组件的挂载
  components: {
    Swiper,
  },
  // Vue方法定义
  methods: {
    getType() {
      api.shopping().then((res) => {
        this.type = res.data;
        this.typeList = this.type.filter((item) => {
          return item.type === this.nowIndex;
        });
      });
    },
    getbanner() {
      api.getbanner({ type: this.nowIndex }).then((res) => {
        this.bannerList = res.data;
      });
    },
    getActive(index) {
      this.nowIndex = index;
      // 模拟分类数据
      this.getType();
      //模拟轮播图的数据
      this.getbanner();
    },
    // 路由传参
    getfenclassList(item) {
      this.$router.push({
        path: "/classify",
        query: item,
      });
    },
    // 请空按钮
    GetemptyShow() {
      if (this.valueList.length === 0) {
        this.emptyShow = false;
      } else {
        this.emptyShow = true;
      }
    },
    // 回车事件
    onSearch(val) {
      if (val === "") {
        return;
        // 判断有没有登录
      } else if (this.token) {
        // 已登录
        api.storeValue({ val, uid: this.token.uid }).then((res) => {
          this.valueList = res.data;
          this.GetemptyShow();
        });
      } else {
        // 未登录
        api.storeValue({ val }).then((res) => {
          console.log(res);
          this.valueList = res.data;
          this.GetemptyShow();
        });
      }

      this.valueList.push(val);
      this.$router.history.push({
        path: "/index_value",
        query: { val },
      });
    },
    // 点击取消事件
    onCancel() {

      if (this.type) {
        this.$router.push({name:"home"})
      }
      this.IfShow = false;
    },
    // 点击输入框
    click() {
      this.type= "";
      this.IfShow = true;
    },
    // 点击清空
    clickRemove() {
      if (this.token) {
        // 已登录
        api.remove({ uid: this.token.uid }).then((res) => {
          this.valueList = res.data;
          this.GetemptyShow();
        });
      } else {
        // 未登录
        api.remove().then((res) => {
          this.valueList = res.data;
          this.GetemptyShow();
        });
      }
    },
    // 点击单个清空
    remove(item) {
      console.log(item);
      if (this.token) {
        // 已登录
        api.remove({ uid: this.token.uid, id: item.id }).then((res) => {
          this.valueList = res.data;
          this.GetemptyShow();
        });
      } else {
        // 未登录
        api.remove({ id: item.id }).then((res) => {
          this.valueList = res.data;
          this.GetemptyShow();
        });
      }
    },
    empty() {
      this.clickRemove();
    },
    onclick(item) {
      console.log(item.val);
      this.onSearch(item.val);
    },
    emptys() {
      if (this.vif != false) {
        this.$refs.bian.innerHTML = `编辑`;
        this.vif = false;
      } else {
        this.$refs.bian.innerHTML = `取消`;
        this.vif = true;
      }
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getType();
    this.getbanner();
    if (this.token) {
      // 已登录
      api.storeValue({ uid: this.token.uid, type: 1 }).then((res) => {
        this.valueList = res.data;
        this.GetemptyShow();
      });
    } else {
      // 未登录
      api.storeValue({ type: 2 }).then((res) => {
        this.valueList = res.data;
        this.GetemptyShow();
      });
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (this.type) {
      this.IfShow = true
    }
    // console.log(
    // this.$route.query.type
    // );
  },
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */

.fenClass {
  width: 100%;
  height: 100%;
}
.sou {
  width: 100%;
  height: 8%;
  float: left;
}
.fenClass_body {
  width: 100%;
  height: calc(100% - 8%);
  float: left;
}
.left {
  width: 25%;
  height: 100%;
  background: #f7f7f7;
  float: left;
}
.left_list {
  width: 100%;
  height: 7%;
  line-height: 3rem;
  text-align: center;
}
.active {
  color: red;
  background: white;
}
.right {
  width: 75%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  padding: 3%;
  padding-bottom: 0;
}
.right_box {
  width: 100%;
  height: 100%;
}
.type {
  width: 31%;
  height: 14%;
  margin-top: 3%;
  margin-right: 2%;
  float: left;
  font-size: 12px;
  text-align: center;
}
.type img {
  width: 80%;
  height: 70%;
  float: left;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 5%;
}
.tan {
  width: 100%;
  height: 100%;
  top: 7%;
  position: fixed;
  background: white;
  z-index: 555;
}
.tan {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: animateLeft;
}
@keyframes animateLeft {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.lishi {
  width: 100%;
  height: 20%;
}
.lishi span {
  display: inline-block;
  float: left;
  padding: 2%;
  text-align: center;
  background: gainsboro;
  margin-left: 2.1%;
  margin-top: 3%;
  border-radius: 25px;
  font-size: 12px;
}
.tan p {
  font-size: 13px;
  margin-left: 3%;
  margin-top: 3%;
  width: 100%;
  display: inline-block;
}
.tan p span {
  font-size: 13px;
  float: right;
  padding-right: 6%;
}
.bb {
  font-size: 13px;
}
</style>